<template>
<div class="container">
    <map 
       id="qqMapSdk" 
       :latitude="latitude"
       :longitude="longitude"
       :circles="circles"
       :markers="markers"
       @markertap="markertap"
       scale="11"
       @tap="top"
       show-location>
          <cover-view class='toFaBag' @click="toFaBag">
             <cover-image src="/static/images/fahongbao@2x.png" class="toFaBagImg"></cover-image>
              
          </cover-view>
          <cover-view class='mask' v-if="show">
               <cover-image :src="img+'/img_big_red_envelope@2x.png'" class="redEnvelope"></cover-image>
               <cover-image src="/static/images/cha.png" class="colse" @click="close"></cover-image>
               <cover-view class="user">
                   <cover-view class="thumb">
                        <cover-image :src="userInfo.avatar" class="avatar" v-if="userInfo.avatar"></cover-image>
                        <cover-image src="/static/images/tx.png" class="avatar" v-else></cover-image>
                        <cover-image src="/static/images/grade/icon_vip@2x.png" class="grade" v-if="is_auth==3&&is_partner==0"></cover-image>
                        <cover-image src="/static/images/grade/icon_partner@2x.png" class="grade"  v-if="Level==1"></cover-image>
                        <cover-image src="/static/images/grade/icon_partner2@2x.png" class="grade" v-if="Level==2"></cover-image>
                        <cover-image src="/static/images/grade/icon_partner3@2x.png" class="grade" v-if="Level==3"></cover-image>
                    </cover-view>
                    <cover-view class="nickname">{{userInfo.nickname}}</cover-view>
               </cover-view>
               <cover-image :src="ad_img" class="adImg" @click="toRuter"></cover-image>
               <cover-view class="toOpen" @click="toOpen">
                   
               </cover-view>
          </cover-view>
     </map>
</div>
</template>
<script>
var coordinate;
// import QQMapWX from '../../../static/qqmap-wx-jssdk.js'
import {getbag} from '@/api/redbag'
import { xdLogin } from "@/utils/login"
export default {
    data() {
        return {
            // qqMapSdk: null,
            longitude:"",
            latitude:"",
            mapCtx:"",
            circles:[],
            show:false,
            markers: [ ],
            markerId:"",
            list:"",
            userInfo:"",
            img: this.$URL.imgurl,
            user_id:0,
            coordinate:{
                latitude:0,
                longitude:0,
            },
            ad_img:""
        }
    },
    methods: {
        getCurLocation() {
            let self = this
            wx.getLocation({
                type: 'gcj02',
                success(res) {
                    console.log(res)
                    self.latitude=res.latitude
                    self.longitude=res.longitude
                    self.circles= [{
                        latitude: res.latitude,
                        longitude: res.longitude,
                        color: '#1A84FBFF',
                        fillColor: '#7cb5ec88',
                        radius: 10000,
                    }]
                }
            })
        },
        markertap(e){
           console.log(e)
           this.markerId=e.mp.markerId;
           this.show=true;
           let user=this.list.filter(
                function(item) {
                    if(item.id==e.mp.markerId){
                         return item;
                    }
                   
                })
            this.userInfo=user[0].user   
            this.ad_img=user[0].ad_img
            console.log(user)

        },
        top(e){
           console.log(e)
        },
        close(){
            this.show=false;
        },
        toOpen(){
            let url="../redbag/main?id="+this.markerId;
            mpvue.navigateTo({url})
            this.show=false;
        },
        toFaBag(){
            let url="../sendredBag/main";
            mpvue.navigateTo({url})
        },
        getbags(){
            let data={}
            data.lng=this.coordinate.longitude;
            data.lat=this.coordinate.latitude;
            data.user_id=this.user_id
            getbag(data).then(res=>{
                if(res.code==200){
                    let data=res.data;
                    let marker=[];
                    for(var i in data){
                        let item={
                            width: 22,
                            height: 31,
                            iconPath: "/static/images/img_red_envelopes_uncollected@2x.png",
                        }
                        item.id=data[i].id
                        item.latitude=data[i].position.lat
                        item.longitude=data[i].position.lng
                        marker.push(item)
                    }
                    console.log(marker)
                    console.log(data)
                    this.markers=marker;
                    this.list=data
                }
                
            })
        },
        toRuter(){
            mpvue.navigateTo({
                url:"../other/main?id="+this.userInfo.id
            })
        }
    },
    mounted() {
        // this.mapCtx = wx.createMapContext('qqMapSdk')
        // this.qqMapSdk = new QQMapWX({
        //     key: 'KO7BZ-26LKP-N4TDC-L4IZ3-XWMWK-S4FMG'
        // })
        this.getCurLocation()
        
    },
    onLoad(){
        Object.assign(this.$data, this.$options.data())
        wx.getStorageSync("user_info").id?this.user_id=wx.getStorageSync("user_info").id:'';
        wx.getStorageSync("coordinate")?this.coordinate=wx.getStorageSync("coordinate"):'';
        this.getbags()

    },

}
</script>

<style lang="scss">
.container {
    background-color: #fff;
    min-height: 100vh;
    font-size: 16px;
    // padding: 40px 15px;
    box-sizing: border-box;

    #qqMapSdk {
        height: 100vh;
        width: 100%;
    }
    .toFaBag{
        width:285px;
        height:45px;
        background:linear-gradient(0deg,rgba(232,179,90,1) 0%,rgba(248,206,136,1) 100%);
        border-radius:5px;
        position:fixed;
        left:0;
        right:0;
        bottom:38px;
        text-align:center;
        line-height:45px;
        font-size:15px;
        font-weight:bold;
        color:rgba(130,74,49,1);
        z-index:1;
        margin:auto;
        button{
            background:linear-gradient(0deg,rgba(232,179,90,1) 0%,rgba(248,206,136,1) 100%);
            font-size:15px;
            font-weight:bold;
            color:rgba(130,74,49,1);
            width:285px;
            padding:0;
            line-height:45px;
        }
        .toFaBagImg{
            background:linear-gradient(0deg,rgba(232,179,90,1) 0%,rgba(248,206,136,1) 100%);
            font-size:15px;
            font-weight:bold;
            color:rgba(130,74,49,1);
            width:285px;
            padding:0;
            height:45px;
        }
    }
    .mask{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:rgba(0,0,0,0.5);
        z-index:2;
        .redEnvelope{
            width:308px;
            height:399px;
            position:absolute;
            top:92px;
            right:0;
            left:0;
            margin:auto;
        }
        .toOpen{
            width:100px;
            height:100px;
            background:rgba(253,209,37,0);
            border-radius:50%;
            position:absolute;
            top:320px;
            left:0;
            right:0;
            margin:auto;
            .qiahb{
                width:100px;
                height:100px;
                background:rgba(253,209,37,0);
                padding:0;
                margin:0;
                &::before{
                    border:none;
                }
                &::after{
                    border:none;
                }
            }
        }
        .colse{
            position:absolute;
            top:44px;
            left:316px;
            display:block;
            width:25px;
            height:25px;
        }
        .adImg{
            position:absolute;
            top:225px;
            left:0;
            right:0;
            margin:auto;
            display:block;
            width:240px;
            height:80px;
        }
        .user{
            position:absolute;
            top:117px;
            left:0;
            right:0;
            .thumb{
                width:60px;
                height:60px;
                position:relative;
                margin:0 auto;
                .avatar{
                    width:60px;
                    height:60px;
                    border-radius:50%;
                    display:block;
                }
                .grade{
                    width:15px;
                    height:15px;
                    position:absolute;
                    bottom:0;
                    right:0;
                }
            }
            .nickname{
                font-size:16px;
                font-weight:bold;
                margin-top:5px;
                color:rgba(250,223,154,1);
                line-height:18px;
                text-align:center;
            }
        }
    }
}
</style>
